<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<title>栅格系统</title>
	
	<link rel="stylesheet"  href="__ROOT__/static/css/bootstrap.min.css" />
	<style>

a:focus{
outline:none;
}

}
	</style>
	
	</head>
<body style="margin:200px">


<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">标签页和工具提示插件</p>

<ul class="nav nav-tabs">

<li class="active"><a href="#html5" data-toggle="tab">HTML5</a></li>

<li><a href="#bootstrap" data-toggle="tab">Bootstrap有淡入淡出效果</a></li>
 <li><a href="#jquery" data-toggle="tab">jQuery</a></li> 
 <li><a href="#extjs" data-toggle="tab">ExtJS</a></li>

</ul>

<div class="tab-content" style="padding: 10px;"> 
<div class="tab-pane active fade in"  id="html5">有active，要想有淡入淡出效果需要 fade in .联合使用 标准通用标记语言下的一个应用HTML 标准自1999 年12 月发布的HTML4.01后，后继的HTML5 和其它标准被束之高阁，为了推动Web 标准化运动的发展，一些公司联合起来，成立了一个叫做Web Hypertext Application Technology Working Group（Web 超文本应用技术工作组-WHATWG） 的组织。WHA。在2006 年，双方决定进行合作，来创建一个新版本的HTML。...
</div>
 <div class="tab-pane fade" id="bootstrap">.Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基
于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。[1] 它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS/HTML 框架。Bootstrap

提供了优雅的 HTML 和 CSS 规范，它即是由动态 CSS 语言 Less 写成。Bootstrap 一经推出后颇受欢迎..
</div> 
<div class="tab-pane" id="jquery">JQuery 是继 prototype 之后又一个优秀的 Javascript 库。它是轻量级的 js
库 ，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）， jQuery2.0 及后续版本将不再支持 IE6/7/8 浏览器。jQuery 使用户能更方便地处理 HTML
（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供 AJAX 交互。jQuery 还有一个比...</div>

<div class="tab-pane" id="extjs">.ExtJS 可以用来开发 RIA 也即富客户端的 AJAX 应用，是一个用 javascript

写的，主要用于创建前端用户界面，是一个与后台技术无关的前端 ajax 框架。因此，可以把 ExtJS 用在.Net、Java..</div> </div>


<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">标签页和工具提示插件 胶囊式</p>

<ul class="nav nav-pills">

<li class="active"><a href="#html5" data-toggle="tab">HTML5</a></li>

<li><a href="#bootstrap" data-toggle="tab">Bootstrap有淡入淡出效果</a></li>
 <li><a href="#jquery" data-toggle="tab">jQuery</a></li> 
 <li><a href="#extjs" data-toggle="tab">ExtJS</a></li>

</ul>
<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">标签页和工具提示插件 使用js操作</p>



<ul id="nav" class="nav nav-tabs">

<li class="active"><a href="#html5" >HTML5</a></li>

<li><a href="#bootstrap" >Bootstrap有淡入淡出效果</a></li>
 <li><a href="#jquery" >jQuery</a></li> 
 <li><a href="#extjs" >ExtJS</a></li>

</ul>

<div class="tab-content" style="padding: 10px;"> 
<div class="tab-pane active fade in"  id="html5">有active，要想有淡入淡出效果需要 fade in .联合使用 标准通用标记语言下的一个应用HTML 标准自1999 年12 月发布的HTML4.01后，后继的HTML5 和其它标准被束之高阁，为了推动Web 标准化运动的发展，一些公司联合起来，成立了一个叫做Web Hypertext Application Technology Working Group（Web 超文本应用技术工作组-WHATWG） 的组织。WHA。在2006 年，双方决定进行合作，来创建一个新版本的HTML。...
</div>
 <div class="tab-pane fade" id="bootstrap">.Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基
于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。[1] 它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS/HTML 框架。Bootstrap

提供了优雅的 HTML 和 CSS 规范，它即是由动态 CSS 语言 Less 写成。Bootstrap 一经推出后颇受欢迎..
</div> 
<div class="tab-pane" id="jquery">JQuery 是继 prototype 之后又一个优秀的 Javascript 库。它是轻量级的 js
库 ，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）， jQuery2.0 及后续版本将不再支持 IE6/7/8 浏览器。jQuery 使用户能更方便地处理 HTML
（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供 AJAX 交互。jQuery 还有一个比...</div>

<div class="tab-pane" id="extjs">.ExtJS 可以用来开发 RIA 也即富客户端的 AJAX 应用，是一个用 javascript

写的，主要用于创建前端用户界面，是一个与后台技术无关的前端 ajax 框架。因此，可以把 ExtJS 用在.Net、Java..</div> </div>


<pre>
事件有两个
show.bs.tab	在调用 tab 方法时触发

shown.bs.tab	在显示整个标签时触发

</pre>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">工具提示插件</p>

<a href="#" title="超文本标识符">HTML5 鼠标放在上面会有title显示 加$('a').tooltip();会好看</a>


<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">工具提示插件中 解析html</p>
<a href="#" data-toggle="tooltip"  title="<b>超文本标识符</b>">HTML5 鼠标放在上面会有title显示 加$('a').tooltip();会好看</a>

<br/>
<a href="#" data-toggle="tooltip" data-html="true" title="<b>超文本标识符</b>">HTML5 鼠标放在上面会有title显示 加$('a').tooltip();会好看 data-html="true"会解析html </a>
<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">工具提示插件中 改变title出现的位置</p>

<a href="#" data-toggle="tooltip" data-placement="bottom" data-html="true" title="<b>超文本标识符</b>">HTML5 鼠标放在上面会有title显示 加$('a').tooltip();会好看 data-html="true"会解析html  data-placement="bottom"使title出现在下面 </a>
<pre>
默认值 top，还有 bottom、left、right 和 auto。如果 auto 会自行调整合适的位置，如果是 auto left 则会尽量在左边显示，但左边不行就靠右边。
</pre>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">单击 出现弹出框</p>
<button class="btn btn-lg btn-danger" type="button" data-toggle="popover" title="弹出框" data-content="这是一个弹出框插件bootstrap主流工具，下载WeX5，bootstrap开发，快人一步!Apache开源!立即下载!WeX5支持跨端运行，极速秒开!论坛30万+会员在线火热讨论!等你来!">

点击弹出/隐藏弹出框  data-toggle="popover"联系js

</button>
<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">单击 出现弹出框 改变弹出框出现的位置</p>
<button class="btn btn-lg btn-danger" type="button" data-placement="bottom" data-toggle="popover" title="弹出框" data-content="这是一个弹出框插件bootstrap主流工具，下载WeX5，bootstrap开发，快人一步!Apache开源!立即下载!WeX5支持跨端运行，极速秒开!论坛30万+会员在线火热讨论!等你来!">

点击弹出/隐藏弹出框  data-toggle="popover"联系js

</button>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">警告</p>

<div class="alert alert-warning">

<button class="close" type="button" data-dismiss="alert"> <span>&times;</span>

</button>

<p>警告：您的浏览器不支持！</p>

</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">警告 加淡入淡出</p>

<div class="alert alert-warning fade in">

<button class="close" type="button" data-dismiss="alert"> <span>&times;</span>

</button>

<p>警告：您的浏览器不支持！关闭时带动了第三个也关了</p>

</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">警告 用js 可以返回某一页</p>

<div id="alert" class="alert alert-warning fade in">

<button class="close" type="button"> <span>&times;</span>

</button>

<p>警告：您的浏览器不支持！</p>

</div>


<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">按钮</p>

<button class="btn btn-default" >选中以后，按周边就能取消选中</button>
<button class="btn btn-default" data-toggle="button" autocomplete="off">选中以后，必须再点击才能取消选中</button>
<br/>同前，但颜色加深<br/>
<button class="btn btn-primary" >选中以后，按周边就能取消选中</button>
<button class="btn btn-primary" data-toggle="button" autocomplete="off">选中以后，必须再点击才能取消选中</button>

<p>在 Firefox 多次页面加载时，按钮可能保持表单的禁用或选择状态。解决方案是：添加 autocomplete="off"。</p>
<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">单选按钮</p>

<div class="btn-group" data-toggle="buttons">
 <label for="" class="btn btn-primary active">

<input type="radio" name="sex" autocomplete="off" checked> 男 </label>
<label for="" class="btn btn-primary">

<input type="radio" name="sex" autocomplete="off"> 女 </label>
</div>

<p>active的作用是外观的男女首选被选择</p>


<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">复选按钮</p>

<div class="btn-group" data-toggle="buttons"> 
<label for="" class="btn btn-primary active">

       <input type="checkbox" name="fa" autocomplete="off" checked>音乐

</label>

<label for="" class="btn btn-primary">

      <input type="checkbox" name="fa" autocomplete="off"> 体育 
</label>

<label for="" class="btn btn-primary">

          <input type="checkbox" name="fa" autocomplete="off"> 美术 
</label>

<label for="" class="btn btn-primary">
         <input type="checkbox" name="fa" autocomplete="off"> 电脑
 </label>

</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">加载状态</p>

<button id="myButton" type="button" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
加载状态

</button>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">手风琴</p>

<button class="btn btn-primary" data-toggle="collapse" data-target="#content">

Bootstrap </button>

<div class="collapse" id="content"> 
<div class="well">
Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由

Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/HTML 框架。目前,Bootstrap 最新版本为 3.0 。

</div>

</div>
<p> class="well" 是包含 class="collapse"隐藏/显示  data-target="#content" 指向  id="content"</p>


<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">手风琴2 只能展开一层</p>

<div class="panel-group" id="accordion">
 <div class="panel panel-default">

<div class="panel-heading">


<h4 class="panel-title">

<a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">点击我进行展示，再点击我进行折叠，第一部分</a>

</h4>

</div>

<div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body">
这里是第一部分。collapse in 一开始就展示

</div>

</div>

</div>

<div class="panel panel-default"> <div class="panel-heading">

<h4 class="panel-title">

<a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">点击我进行展示，再点击我进行折叠，第二部分</a>

</h4>

</div>

<div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body">
这里是第二部分。panel-collapse collapse 一开始，先隐藏

</div>

</div>

</div>

<div class="panel panel-default"> <div class="panel-heading">

<h4 class="panel-title">

<a href="#collapseThree" data-toggle="collapse" data-parent="#accordion">点击我进行展示，再点击我进行折叠，第三部分</a>

</h4>

</div>

<div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body">
这里是第三部分。

</div>

</div>

</div>

</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">手风琴3 可全部展开</p>

<div class="panel-group" >
<!--第一个-->
 <div class="panel panel-default">

<div class="panel-heading">


<h4 class="panel-title">

<a href="#collapseOne1" data-toggle="collapse" >点击我进行展示，再点击我进行折叠，第一部分</a>

</h4>

</div>

<div id="collapseOne1" class="panel-collapse collapse in"> <div class="panel-body">
这里是第一部分。collapse in 一开始就展示

</div>

</div>

</div>
<!--第二个-->
<div class="panel panel-default"> <div class="panel-heading">

<h4 class="panel-title">

<a href="#collapseTwo1" data-toggle="collapse" >点击我进行展示，再点击我进行折叠，第二部分</a>

</h4>

</div>

<div id="collapseTwo1" class="panel-collapse collapse in"> <div class="panel-body">
这里是第二部分。panel-collapse collapse 一开始，先隐藏

</div>

</div>

</div>
<!--第三个-->
<div class="panel panel-default"> <div class="panel-heading">

<h4 class="panel-title">

<a href="#collapseThree1" data-toggle="collapse" data-parent="#accordion">点击我进行展示，再点击我进行折叠，第三部分</a>

</h4>

</div>

<div id="collapseThree1" class="panel-collapse collapse in"> <div class="panel-body">
这里是第三部分。

</div>

</div>

</div>
<!--第三个结束-->
</div>
























<script src="__ROOT__/static/js/jquery.min.js"></script>
<script src="__ROOT__/static/js/bootstrap.min.js"></script>
<script type="text/javascript">

$('#nav a').on('click', function (e) {
//阻止默认行为
e.preventDefault(); 
$(this).tab('show');

});
//事件，其他雷同

$('#nav a').on('show.bs.tab', function () {

alert('调用 tab 时触发！');

});
//JS 部分需要声明 
$('a').tooltip();
//JavaScript 初始化 弹出框
$('button').popover();
//响应弹出框
$('.close').on('click', function () {

$('#alert').alert('close');

})

$('#alert').on('close.bs.alert', function () {

alert('当 close 方法被触发时调用！');

});
$('#alert').on('closed.bs.alert', function () {

alert('当 close2 方法被触发时调用！');
self.location='index13.htm'; 
});

$('#myButton').on('click', function () { var btn = $(this).button('loading'); setTimeout(function () {

btn.button('reset'); }, 1000);
});

</script>



</body>
</html>